<template>
    <a-space style="margin-bottom: 15px">
        <a-input placeholder="输入接口名称或接口URL" v-model:value="searchValue" style="width: 250px"></a-input>
        <a-button type="primary" @click="getPublishApiList">
            <template #icon>
                <SearchOutlined />
            </template>
            搜索
        </a-button>
        <a-button type="dashed" @click="addPublishApi"> 添加 </a-button>
    </a-space>
    <a-spin :spinning="tableLoading" :style="spinStyle">
        <a-table sticky :columns="columns" :data-source="tableData" bordered :pagination="false" size="small"> </a-table>
        <br />
        <a-row justify="center" v-if="total > 10">
            <a-pagination
                v-model:current="page"
                v-model:pageSize="size"
                show-quick-jumper
                :total="total"
                showSizeChanger
                @change="pageChange"
                :show-total="(total: number) => `总计 ${total} 项`"
            />
        </a-row>
        <PublishApiModalComponent
            v-model:visible="visible"
            :show-or-update-publish-obj="currentPublishObj"
            :handleType="handleType"
            @ok="modalOk"
        ></PublishApiModalComponent>
    </a-spin>
</template>

<script lang="ts" setup>
    // 发布接口管理;
    import { useSpinLoadingState } from "@/hooks/useCommon";
    import { publishApiAdminApi } from "@/api/esArticle";
    import { PublishApiModalComponent } from "./tsx/publishApiComponents";
    import { SearchOutlined } from "@ant-design/icons-vue";
    import { Button, message, Popconfirm, type TableColumnsType } from "ant-design-vue";
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    const currentPublishObj = ref<PutPublishApiParmas | null>(null);
    const handleType = ref(1); // 1 查看 2 修改 3 添加
    const visible = ref(false);
    // 模态框确定
    const modalOk = (obj: PostPublishApiParmas) => {
        if (handleType.value === 3) {
            publishApiAdminApi(obj, "post")
                .then((res) => commonThenCallback(res, "add"))
                .catch(() => {
                    message.error("添加失败!");
                })
                .finally(getPublishApiList);
            // obj
        } else if (handleType.value === 2) {
            publishApiAdminApi(currentPublishObj.value as PutPublishApiParmas, "put")
                .then((res) => commonThenCallback(res, "update"))
                .catch(() => {
                    message.error("修改失败!");
                });
        }
    };
    const columns: TableColumnsType = [
        {
            title: "id",
            align: "center",
            dataIndex: "id",
            width: 50,
            key: "name"
        },
        {
            title: "接口名称",
            align: "center",
            dataIndex: "name",
            width: 200,
            key: "name"
        },
        {
            title: "接口URL",
            align: "center",
            dataIndex: "api_path",
            key: "api_path",
            width: 200
        },
        {
            title: "字段MAP",
            align: "center",
            dataIndex: "field_data",
            customRender(row: any) {
                return h("div", {}, { default: () => row.value.map((item: SelectOptionItem) => item.value).join("--") });
            }
        },
        {
            title: "操作",
            align: "center",
            customRender(row: any) {
                const showButton = h(
                    Button,
                    {
                        type: "link",
                        style: {
                            padding: "4px 8px"
                        },
                        onClick() {
                            visible.value = true;
                            currentPublishObj.value = row.record;
                            handleType.value = 1;
                        }
                    },
                    { default: () => "查看" }
                );
                const deleteButton = h(
                    Popconfirm,
                    {
                        title: "确认删除吗",
                        okText: "确认",
                        cancelText: "取消",
                        onConfirm() {
                            publishApiAdminApi({ id: row.record.id }, "delete").then((res) => commonThenCallback(res, "delete"));
                        }
                    },
                    {
                        default: () =>
                            h(
                                Button,
                                {
                                    danger: true,
                                    type: "link",
                                    style: {
                                        padding: "4px 8px"
                                    }
                                },
                                { default: () => "删除" }
                            )
                    }
                );
                const updateButton = h(
                    Button,
                    {
                        type: "link",
                        style: {
                            color: "#faad14",
                            padding: "4px 8px"
                        },
                        onClick() {
                            visible.value = true;
                            currentPublishObj.value = row.record;
                            handleType.value = 2;
                        }
                    },
                    { default: () => "修改" }
                );
                const actions = h("div", {}, [showButton, updateButton, deleteButton]);
                return actions;
            }
        }
    ];
    const page = ref(1);
    const size = ref(10);
    const total = ref(0);
    const searchValue = ref("");
    const tableData = ref<Array<PutPublishApiParmas>>([]);
    // 当前页变化
    const pageChange = (pageNumber: number) => {
        page.value = pageNumber;
        getPublishApiList();
    };
    const getPublishApiList = () => {
        tableLoading.value = true;
        const params: GetPublishApiParmas = {
            page: page.value,
            size: size.value
        };
        if (searchValue.value) {
            params.search = searchValue.value;
        }

        publishApiAdminApi(params, "get")
            .then((res) => {
                if (res.data.code === 200) {
                    tableData.value = res.data.data;
                    total.value = res.data.total;
                } else {
                    message.error("获取失败!");
                }
            })
            .catch(() => {
                message.error("服务器错误!");
            })
            .finally(() => {
                tableLoading.value = false;
            });
    };
    // 添加发布接口 弹窗
    const addPublishApi = () => {
        visible.value = true;
        handleType.value = 3;
    };
    onMounted(() => {
        getPublishApiList();
    });
    const commonThenCallback = (res: any, type: "update" | "add" | "delete" = "update") => {
        const s = type === "update" ? "修改" : type === "add" ? "添加" : "删除";
        if (res.data.code === 200) {
            message.success(s + "成功!");
        } else {
            message.error(s + "失败!");
        }
    };
</script>

<style scoped lang="scss"></style>
